<template>
  <div class="system-equipOutputDay-container">
    <el-card shadow="hover">
      <div class="system-equipOutputDay-search mb15">
        <el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="100px">
              <el-form-item label="客户编号" prop="customerId">
                <el-input v-model="tableData.param.customerId" placeholder="请输入客户编号" clearable
                  @keyup.enter="equipOutputDayList" />
              </el-form-item>
              <el-form-item label="设备编号" prop="equipNum">
                <el-input v-model="tableData.param.equipNum" placeholder="请输入设备编号" clearable
                  @keyup.enter="equipOutputDayList" />
              </el-form-item>
              <el-form-item label="起始月份" prop="productionMonth">
                <el-date-picker clearable style="width: 230px" type="monthrange" v-model="tableData.param.productionMonth"
                  range-separator="至" :disabledDate="disabledDate" format="YYYY-MM" value-format="YYYY-MM"
                  start-placeholder="开始时间" end-placeholder="结束时间"></el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="equipOutputDayList"><el-icon><ele-Search /></el-icon>搜索</el-button>
                <el-button @click="resetQuery(queryRef)"><el-icon><ele-Refresh /></el-icon>重置</el-button>
              </el-form-item>
        </el-form>
      </div>
      <el-table v-loading="loading" :data="tableData.data" @selection-change="handleSelectionChange">
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <el-table-column label="客户编号" align="center" prop="customerId" min-width="150px" />
        <el-table-column label="设备编号" align="center" prop="equipNum" min-width="150px" />
        <el-table-column label="生产年份" align="center" prop="productionYear" min-width="150px" />
        <el-table-column label="生产月份" align="center" prop="productionMonth" :formatter="row => `${row.productionMonth}月`"
          min-width="150px" />
        <el-table-column label="合格数" align="center" prop="qualifiedCount" min-width="150px" />
        <el-table-column label="不合格数" align="center" prop="unqualifiedCount" min-width="150px" />
        <el-table-column label="合格率(%)" align="center" prop="qualifiedRatio"
          :formatter="row => `${(row.qualifiedRatio * 100).toFixed(2)}`" min-width="150px" />
        <el-table-column label="不合格率(%)" align="center" prop="unqualifiedRatio"
          :formatter="row => `${(row.unqualifiedRatio * 100).toFixed(2)}`" min-width="150px" />
      </el-table>
      <pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum"
        v-model:limit="tableData.param.pageSize" @pagination="equipOutputDayList" />
    </el-card>

  </div>
</template>
<script>
import { toRefs, reactive, onMounted, ref, defineComponent, computed, getCurrentInstance, toRaw } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import {
  getEquipOutputMonth,
} from "../../api/report";
export default defineComponent({
  name: "ApiV1SystemEquipOutputDayList",
  setup() {
    const { proxy } = getCurrentInstance()
    const loading = ref(false)
    const queryRef = ref()
    const editRef = ref();
    const detailRef = ref();
    // 是否显示所有搜索选项
    const showAll = ref(false)
    // 非单个禁用
    const single = ref(true)
    // 非多个禁用
    const multiple = ref(true)
    const state = reactive({
      ids: [],
      tableData: {
        data: [],
        total: 0,
        loading: false,
        param: {
          pageNum: 1,
          pageSize: 10,
          id: undefined,
          customerId: undefined,
          equipNum: undefined,
          productionMonth: undefined,
          totalCount: undefined,
          qualifiedRatio: undefined,
          unqualifiedRatio: undefined,
          dateRange: []
        },
      },
    });
    // 页面加载时
    onMounted(() => {
      //initTableData();
    });
    // 初始化表格数据
    const initTableData = () => {
      equipOutputDayList()
    };
    /** 重置按钮操作 */
    const resetQuery = (formEl) => {
      if (!formEl) return
      formEl.resetFields()
      equipOutputDayList()
    };
    // 获取列表数据
    const equipOutputDayList = () => {
      const params = state.tableData.param;
      if (!params.productionMonth) {
        ElMessage.warning('起始月份不能为空');
        return;
      }
      loading.value = true
      if (params.productionMonth && params.productionMonth.length === 2) {
        params.product_startMonth = params.productionMonth[0]
        params.product_endMonth = params.productionMonth[1]
      }
      getEquipOutputMonth(params).then((res) => {
        let list = res.data.list ?? [];
        list.map((item) => {
          item.createdBy = item.createdUser?.userNickname
        })
        state.tableData.data = list;
        state.tableData.total = res.data.total;
        loading.value = false
      })
    };
    const toggleSearch = () => {
      showAll.value = !showAll.value;
    }
    // 多选框选中数据
    const handleSelectionChange = (selection) => {
      state.ids = selection.map(item => item.id)
      single.value = selection.length != 1
      multiple.value = !selection.length
    }
    const disabledDate = (time) => {
      // 获取当前日期  
      const currentDate = new Date();
      // 设置时间部分为 00:00:00，以确保比较的是日期部分  
      currentDate.setHours(0, 0, 0, 0);
      // 如果传入的日期大于当前日期，则禁用  
      return time.getTime() > currentDate.getTime();
    }

    return {
      disabledDate,
      proxy,
      editRef,
      detailRef,
      showAll,
      loading,
      single,
      multiple,
      queryRef,
      resetQuery,
      equipOutputDayList,
      toggleSearch,
      handleSelectionChange,
      ...toRefs(state),
    }
  }
})
</script>
<style lang="scss" scoped>
.colBlock {
  display: block;
}

.colNone {
  display: none;
}

.ml-2 {
  margin: 3px;
}</style>